$(function() {
	$("#nav-home-tab").click(function() {
		$.ajax({
			method: "get",
			url: "https://douban.uieee.com/v2/movie/in_theaters",
			data: {
				start: "0",
				count: "8",
				city: "北京"
			},
			dataType: "jsonp",
			success: function(r) {
				r.subjects.forEach((e) => addMovie(e, "row1"));
			}
		});
	});
	$("#nav-profile-tab").click(function() {
		$.ajax({
			method: "get",
			url: "https://douban.uieee.com/v2/movie/top250",
			data: {
				start: "0",
				count: "8",
			},
			dataType: "jsonp",
			success: function(r) {
				r.subjects.forEach((e) => addMovie(e, "row2"));
			}
		});
	});
	$("#nav-jjsy-tab").click(function() {
		$.ajax({
			method: "get",
			url: "https://douban.uieee.com/v2/movie/coming_soon",
			data: {
				start: "0",
				count: "8",
			},
			dataType: "jsonp",
			success: function(r) {
				r.subjects.forEach((e) => addMovie(e, "row3"));
			}
		});
	});
	$("#nav-khts-tab").click(function() {
		$.ajax({
			method: "get",
			url: "https://douban.uieee.com/v2/book/search?q=科幻&count=8",
			data: {
				start: "0",
				count: "8",
			},
			dataType: "jsonp",
			success: function(r) {
				r.subjects.forEach((e) => addMovie2(e, "row4"));
			}
		});
	});
})

function addMovie(e, className) {
	console.log(e);
	// 构建info信息
	let info = "";
	e.genres.forEach((s) => {
		info += '<span class="badge badge-info">' + s + '</span> ';
	})
	// 构建节点
	let ele =
		`<div class="col-md-3">
						<div class="card" style="width: 12rem;">
						<a href="${e.alt}"><img class="card-img-top" src="${e.images.small}" alt="Card image cap"></a>
						<div class="card-body">
							<h5 class="card-title"><span class="badge badge-danger">${e.rating.average}</span> ${e.title}</h5>
							<p class="card-text">${info}</p></div></div>
		</div>`;
	// 插入节点 
	$("." + className + "").append(ele);

}
function addMovie2(e, className) {
	console.log(e);
	// 构建info信息
	let info = "";
	e.genres.forEach((s) => {
		info += '<span class="badge badge-info">' + s + '</span> ';
	})
	// 构建节点
	let ele =
		`<div class="col-md-3">
						<div class="card" style="width: 12rem;">
						<a href="${e.alt}"><img class="card-img-top" src="${e.images.small}" alt="Card image cap"></a>
						<div class="card-body">
							<h5 class="card-title"><span class="badge badge-danger">${e.rating.average}</span> ${e.title}</h5>
							<p class="card-text">${info}</p></div></div>
		</div>`;
	// 插入节点 
	$("." + className + "").append(ele);

}